   <div class="main-container">
         <!-- 
          <div><h3>网页国际语言信息列表 (International Language Tags for Web)</h3> 
          <label>搜索(Search)</label><input type="text" size="16"></div>
          -->
          <div style="display: flex; align-items: center; gap: 10px;">
		     <!-- h3 style="margin: 0; line-height: 2em; font-size: 16px; " -->
		     <h3>网页国际语言信息列表 (International Language Tags for Web)</h3>
		     <label style="line-height: 2em;"">搜索(Search)</label>
		     <input style="height: 2em; padding: 0 5px; box-sizing: border-box;"  type="text"  list="input-suggestions" size="48"
		      onChange="search(this.value)">
		  </div>
		  <datalist id="input-suggestions">
		  </datalist>
  		
          <div class="table-scroll-container">  
           <div class="tables-container"> 
            <table id="dataTable">
                <thead id="tableHead">
                   <tr>
                       <th>编码</th>
                       <th>中文名</th>
                       <th>英文名</th> 
                   </tr>
               </thead>
               <tbody id="tableBody"> 
               </tbody>
            </table>     
          </div>
         </div>  
        <div class="button-container">
                <button class="btn btn-primary" id="rightAddBtn" onClick="addNew()">新增/new item</button> 
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button class="btn btn-warning" id="rightEditBtn" onClick="editItem()">编辑/edit</button>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button class="btn btn-danger" id="rightDeleteBtn" onClick="delItem()">删除/delete</button> 
       </div>
       
       <div id="edit-modal" class="modal">
          <div class="modal-content-3">
            <h3 class="modal-title">编辑语言信息 (edit Language Tag)</h3>
            <table class="no-hover" border=0 width="90%" align="center" >
                <tr>
                    <td width="25%" style="text-align: right;">代码:</td>
                    <td width="75%"><input type="text"  style="height:26px" name="lcode" value="" size="6"></td>
                </tr>
                <tr>
                    <td width="25%" style="text-align: right;">中文名:</td>
                    <td width="75%"><input type="text" style="height:26px" name="cname" value="" size="36"></td>
                </tr>
                <tr>
                    <td width="25%" style="text-align: right;">英文名:</td>
                    <td width="75%"><input type="text" style="height:26px" name="ename" value="" size="64"></td>
                </tr> 
            </table> 
            <div class="modal-buttons">
                <button class="modal-btn cancel-btn" onclick="closeModal()">取消</button>
                <button class="modal-btn save-btn" onclick="saveItem()">保存</button>
            </div>
         </div>
      </div>
    
    </div>
    
    
    
    <script>
    var langList = null ;
    var currentCode = null;
    var isNewItem = false ;
    
    function search(code){ 
    	if(code==null){
    		return;	
    	}
    	var ca = code.split("/");
    	if(ca.length==0){
    		return;
    	}
    	var row = findRowInTbaleBodyByColumnValue("dataTable",0,ca[0]);
		if(row>=0){
			selectAndScrollToRow("dataTable",row+1);  //thead作为第一行
			setCurrentCode(ca[0]);
		}
    }
    
    function showEdit(item){
    	openEditModal();
    	setInputValue("lcode",item["lcode"]);
    	setInputValue("cname",item["cname"]);
    	setInputValue("ename",item["ename"]);
    }
    
    function setSuggestions(){
    	const body = document.getElementById("input-suggestions");
   		let html = '';
   	    for (let i = 0; i< langList.length; i++) {  
   	    	var t = langList[i];
   	    	html +="<option value='"+t["lcode"]+"/"+t["cname"]+"/"+t["ename"]+"'>"; 
   	    }
   	    body.innerHTML = html ; 
    }
    
    function addNew(){
    	var item = getItem(null);
    	if(item==null){
    		return ;
    	}
    	isNewItem = true;
    	showEdit(item); 
    }
    
    function editItem(){
    	if(currentCode == null){
    		alert("Please select one language first!");
    		return;
    	}
    	var item = getItem(currentCode);
    	if(item == null){
    		return;
    	}
    	isNewItem = false;
    	showEdit(item);
    }
    
    function getItem(code = null){
    	if(code == null){
    		var item={"lcode":"new-c","cname":"","ename":""};
    		return item;
    	}
    	for (let i = 0; i< langList.length; i++) {  
   	    	var t = langList[i];
   	        if(t["lcode"] == code ){
   	        	return t;
   	        }
   	    } 
    	return null;
    }
    
    function setCurrentCode(c){
    	currentCode = c;
    	console.log("currentCode:"+currentCode);
    }
    
    
    function showLangList(){
    	const body = document.getElementById("tableBody");
   		let html = '';
   	    for (let i = 0; i< langList.length; i++) {  
   	    	var t = langList[i];
   	        html += "<tr onClick='setCurrentCode(\""+t["lcode"]+"\")'>"+
   	           "<td>" + t["lcode"] + "</td>"+
               "<td>" + t["cname"] + "</td>"+
               "<td>" + t["ename"] + "</td>"+
               "</tr>"; 
   	    }
   	    body.innerHTML = html ; 
   	    setupRowHighlight("tableBody");
   	    setSuggestions();
   	}  
    
    function addToList(item){
    	//alert(JSON.stringify(item,null,2) +"\r\ncurCode="+currentCode);
    	var have = false;
    	for (let i = 0; i< langList.length; i++) {  
       	    var t = langList[i];
       	    if(isNewItem){
       	    	if(t["lcode"] == item["lcode"]){
           	    	langList[i] = item;
           	    	have = true;
           	    	break;
           	    } 
       	    }else{
       	    	if(t["lcode"] == currentCode){
           	    	langList[i] = item;
           	    	have = true;
           	    	break;
           	    } 
       	    } 
    	}
    	
    	if(have == false && isNewItem){
    		var pos = langList.length ;
    		for (let i = 0; i< langList.length; i++) {  
       	    	var t = langList[i]; 
       	        if( item["lcode"] < t["lcode"]  ){ 
       	        	pos = i;
       	        	break;
       	        }
       	    } 
    		langList.splice(pos, 0 , item);
    	}
    	 
    	showLangList();
    	var row = findRowInTbaleBodyByColumnValue("dataTable",0,item["lcode"]);
		if(row>=0){
			selectAndScrollToRow("dataTable",row+1);  //thead作为第一行
			setCurrentCode(item["lcode"]);
		}
		closeModal();
    }
    
    function removeFromList(item){
    	var pos = -1;
    	for (let i = 0; i< langList.length; i++) {  
   	    	var t = langList[i]; 
   	        if( item["lcode"] == t["lcode"]  ){ 
   	        	pos = i;
   	        	break;
   	        }
   	    } 
    	if(pos==-1){
    		return;
    	}
    	langList.splice(pos, 1);

    	showLangList();
    	
    	var t = null; 
    	if(pos>=0 && pos < langList.length){
    		t = langList[pos];
    	}else{
			if(langList.length>0){
				t = langList[langList.length-1];
			}
    	}
    	currentCode = null;
    	if(t==null){
    		return ;
    	}
    	var row = findRowInTbaleBodyByColumnValue("dataTable",0,t["lcode"]);
		if(row>=0){
			selectAndScrollToRow("dataTable",row+1);  //thead作为第一行
			setCurrentCode(item["lcode"]);
			currentCode = t["lcode"];
		}else{
			currentCode = null;
		}
    }
    
    function delItem(){
    	if(currentCode == null){
    		return;
    	}
    	
    	var js = {"lcode":currentCode};
    	var url = lang_del_uri;
    	var token = curUser["token"];
    	
    	ajaxPostJson(url , token, js , function(status,ret){
			  console.log("Status="+status);
			 // console.log("list Data="+JSON.stringify(ret,null,2)); 
			  if(status==0){
				  if(ret.status==1){   
					  removeFromList(ret["data"]);
				  }else{
					  alert("Error:"+ret["errorCode"]+"\r\nMsg="+ret["desc"]);  
				  }
			  }else{
				  alert("httpStatus="+status+"\r\nErrorMsg="+ret);
			  } 
	    });
    }
    
    function saveItem(){
    	var lcode = getInputValue("lcode");
    	var cname = getInputValue("cname");
    	var ename = getInputValue("ename");
    	if(lcode == null || lcode.length==0 || lcode.length>6){
    		alert("Code can't be null or length must less 5 ");
    		return;
    	}
    	if(cname == null || cname.length==0 || cname.length>12){
    		alert("Chinese name  can't be null or length must be less 12 ");
    		return;
    	}
    	if(ename == null || ename.length==0 || ename.length>32){
    		alert("Chinese name  can't be null or length must be less 32 ");
    		return;
    	}
    	if(isNewItem){ //使用的 lcode 不能与已有相等
    		for (let i = 0; i< langList.length; i++) {  
       	    	var t = langList[i]; 
       	        if( t["lcode"].toLowerCase() == lcode.toLowerCase() ){  
       	        	alert("duplicate language code!");
       	        	return;
       	        }
       	    } 
    	}else{ //不能使用其他项的  lcode 值
    		for (let i = 0; i< langList.length; i++) {  
       	    	var t = langList[i]; 
       	        if( t["lcode"].toLowerCase() == lcode.toLowerCase() && lcode.toLowerCase() != currentCode.toLowerCase()){  
       	        	alert("Can not use other lang code !");
       	        	return;
       	        }
       	    } 
    	}
    	
    	var js = {"lcode":lcode,"cname":cname,"ename":ename};
    	var url = lang_save_uri;
    	var token = curUser["token"];
    	
    	ajaxPostJson(url , token, js , function(status,ret){
			  console.log("Status="+status);
			 // console.log("list Data="+JSON.stringify(ret,null,2)); 
			  if(status==0){
				  if(ret.status==1){   
					  addToList(ret["data"]);
				  }else{
					  alert("Error:"+ret["errorCode"]+"\r\nMsg="+ret["desc"]);  
				  }
			  }else{
				  alert("httpStatus="+status+"\r\nErrorMsg="+ret);
			  } 
	    });
    }
    
    function readLangList(){ 
		var url = lang_list_uri+"/"; 
		debugger;
		ajaxGetJson(url , function(status,ret){
			  console.log("Status="+status);
			 // console.log("list Data="+JSON.stringify(ret,null,2)); 
			  if(status==0){
				  if(ret.status==1){  
					  langList = ret["data"];    
					  showLangList();
				  }else{
					  alert("Error:"+ret["errorCode"]+"\r\nMsg="+ret["desc"]);  
				  }
			  }else{
				  alert("httpStatus="+status+"\r\nErrorMsg="+ret);
			  } 
	    },true,null);
	}
    
    
    
    readLangList(); 
    
    
    </script>